<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" href="/images/icon.png">
    <title>登录</title>
    <link href="/styles/reset.css" rel="stylesheet" type="text/css">
    <link href="/styles/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="/styles/login.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="mainPart">
    <div class="backImg"><img class="backImg1" src="/images/loginBackground.png"></div>
    <div class="container rows">
        <div class="mainLogin">
            <img src="/images/logo.png" alt="好头发">
            <div class="regiTextBox">
                <form class="logForm" id="logForm" method="get" action="#">
                    <fieldset>
                        <p class="legend">欢迎登录我的发</p>
                        <p><input id="logPhone" class="phone" name="phone" placeholder="手机号"></p>
                        <p><input id="logPassword" class="password" name="password"  type="password" placeholder="密码"></p>
                        <p class="autoLogin"><input id="autoLogin" type="checkbox"  value="登录"><span class="autoLoginLeft">自动登录</span><span class="autoLoginRight"><a href="#">忘记密码？</a></span></p>
                        <p><input id="loginBtn" type="submit"  value="登录"></p>
                        <p class="noAccount">还没有账号？<a href="<?=\yii\helpers\Url::toRoute('site/signup')?>">现在注册</a></p>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/js/jquery-1.11.1.js"></script>
<script src="/js/jquery.validate.js"></script>
<script>
    $(document).ready(function(){
        var height = $(window).height();
        var width = $(window).width();
        $('.backImg1').height(height*0.5);
        $('.backImg1').width(width);

        $.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");

        $("#logForm").validate({
            rules : {
                phone : {
                    number:true,
                    required : true,
                    minlength : 11,
                    // 自定义方法：校验手机号在数据库中是否存在
                    // checkPhoneExist : true,
                    isMobile : true
                },
                password : {
                    required : true
                }
            },
            messages : {
                phone : {
                    number:"请输入手机号",
                    required : "请输入手机号",
                    minlength : "确认手机不能小于11个字符",
                    isMobile : "请正确填写您的手机号码"
                },
                password : {
                    required : "密码不能为空",
                }
            },
            errorElement: "em", //可以用其他标签，记住把样式也对应修改
            success: function(lable) {
                //label指向上面那个错误提示信息标签em
                lable.text(" ")      //清空错误提示消息
                    .addClass("success");  //加上自定义的success
            }
        });
    });
</script>
</body>
</html>